import React, { useEffect, useRef, useState, useContext } from 'react';
import { Input, Message, Form, Radio, Button, Row, Col, Select } from 'antd';
import CryptoJS from 'crypto-js';
import styles from './style.module.scss';

import Drawer from 'components/Drawer';

import service from 'service';
import { HomeContext } from './../context';

const formItemLayout = {
    labelCol: {
        md: { span: 4 },
        sm: { span: 4 },
        xs: { span: 24 },
    },
    wrapperCol: {
        md: { span: 20 }, // 屏幕 ≥ 768px
        sm: { span: 20 }, // 屏幕 ≥ 576px
        xs: { span: 24 }, // 屏幕 < 576px
    },
};
const tailLayout = {
    wrapperCol: {
        md: { offset: 4, span: 20 },
        sm: { offset: 4, span: 20 },
        xs: { offset: 0, span: 24 },
    },
};

// 账户编辑
const Editer = (props) => {
    const { onCancel, onOk } = props;
    const { user, visible, type, record, labels, editOrAddHandleCancel, getList } = useContext(HomeContext);

    const formInstance = useRef();
    const [loading, setLoading] = useState(false);

    const initialValues = record ? record : { status: '0' };

    // console.log(document.body.clientWidth)
    // let size = '';
    // let clientWidth = document.body.clientWidth
    // switch (clientWidth) {
    //     case clientWidth >= 1024: size = 'large'; break;
    //     case clientWidth >= 768: size = 'middle'; break;
    //     default: size = 'small';
    // }
    // let dict = {
    //     'large': '50%',
    //     'middle': '80%',
    //     'small': '100%',
    // }
    // console.log(dict[size])

    // 添加
    function add(params) {
        setLoading(true);
        service.account.addOne(params)
            .then(data => {
                console.log(data, 'register-用户登录->请求结果') // 只返回response中的data;
                Message.success('新增成功')
                editOrAddHandleCancel()
                getList();
                onOk()
            })
            .finally(() => {
                setLoading(false);
            })
    }
    // 删除
    function edit(params) {
        setLoading(true);
        service.account.updateOne(params)
            .then(data => {
                console.log(data, 'register-用户登录->请求结果') // 只返回response中的data;
                Message.success('编辑成功')
                editOrAddHandleCancel()
                getList();
                onOk()
            })
            .finally(() => {
                setLoading(false);
            })
    }
    // 点击确定
    function handleSubmit(value) {
        console.log(value)
        if (loading) return;
        let { password, secretKey, ...other } = value;
        let { id } = record || {};
        let { id: userId } = user; // 用户id
        let secretPass = password;
        if (password && secretKey) {
            secretPass = CryptoJS.AES.encrypt(password, secretKey).toString();
        }
        let params = {
            id,
            userId,
            ...other,
            password: secretPass,
        }
        let fn = {
            'add': add,
            'edit': edit
        }
        fn[type](params)
    };
    // 关闭弹窗
    function close() {
        editOrAddHandleCancel()
        onCancel && onCancel()
    }
    return (
        <Drawer
            visible={visible}
            title={type === 'edit' ? '编辑' : '新增'}
            onClose={close}
        >
            <div className={styles.container}>
                <div className={styles.formContent}>
                    <Form
                        {...formItemLayout}
                        onFinish={handleSubmit}
                        initialValues={initialValues}
                        ref={formInstance}
                    >
                        {/* 这样就不会警告了 */}
                        {/* <Form.Item name="id" hidden >
                            <Input hidden />
                        </Form.Item> */}
                        <Form.Item
                            label={'网站名称'}
                            name="site"
                            rules={[{ required: true, message: '请输入' },]}
                        >
                            <Input
                                className={styles.inputStyle}
                                placeholder="请输入"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'网站地址'}
                            name="website"
                            rules={[{ required: true, message: '请输入' },]}
                        >
                            <Input
                                className={styles.inputStyle}
                                placeholder="请输入"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'网站介绍'}
                            name="introduction"
                            rules={[{ required: false, message: '请输入' },]}
                        >
                            <Input.TextArea
                                className={styles.inputStyle}
                                placeholder="请输入"
                                rows={2}
                            />
                        </Form.Item>
                        <Form.Item
                            label={'账户'}
                            name="account"
                            rules={[{ required: true, message: '请输入' },]}
                        >
                            <Input
                                className={styles.inputStyle}
                                placeholder="请输入"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'密码'}
                            name="password"
                            rules={[
                                { required: false, message: '请输入' },
                            ]}
                            extra="为了保障用户密码仅用户本人可知, 采用AES加密, 由用户本人输入的六位数字作为加密密钥, 查看密码原文时需要密钥解密"
                        >
                            <Input.Password
                                className={styles.inputStyle}
                                placeholder="请输入密码"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'加密密钥'}
                            name="secretKey"
                            rules={[
                                { required: false, message: '请输入' },
                            ]}
                            extra="密钥由六位数字组成, 请牢记密钥! 查看被加密的密码原文时需要使用密钥解密! 密码为空时将忽略密钥, 密钥为空时将原文保存密码(警告:未加密密码有泄露的风险!)"
                        >
                            <Input.Password
                                className={styles.inputStyle}
                                placeholder="请输入密码"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'昵称'}
                            name="nickname"
                            rules={[{ required: false, message: '请输入' },]}
                        >
                            <Input
                                className={styles.inputStyle}
                                placeholder="请输入"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'关联账户'}
                            name="associates"
                            rules={[{ required: false, message: '请输入' },]}
                        >
                            <Input
                                className={styles.inputStyle}
                                placeholder="请输入"
                            />
                        </Form.Item>
                        <Form.Item
                            label={'状态'}
                            name="status"
                            rules={[{ required: false, message: '请输入' },]}
                        >
                            <Radio.Group>
                                <Radio value={'0'}>正常</Radio>
                                <Radio value={'1'}>停用</Radio>
                                <Radio value={'2'}>注销</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label={'标签'}
                            name="tags"
                            rules={[{ required: false, message: '请选择' },]}
                        >
                            <Select
                                className={styles.inputStyle}
                                placeholder="请选择"
                                showSearch
                                mode="multiple"
                            >
                                {labels.map(item => (<Select.Option key={item.id} value={item.id}>{item.label}</Select.Option>))}
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label={'备注'}
                            name="remark"
                            rules={[{ required: false, message: '请输入' },]}
                        >
                            <Input.TextArea
                                className={styles.inputStyle}
                                placeholder="请输入"
                                rows={3}
                            />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button htmlType="submit" type="primary" loading={loading} disabled={loading} className={styles.inputStyle2}>确定</Button>
                            <span className={styles.splitBlock}></span>
                            <Button loading={loading} disabled={loading} className={styles.inputStyle2} onClick={close}>取消</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </Drawer >
    )
}

Editer.defaultProps = {
    onCancel: () => { },
    onOk: () => { },
}


export default Editer;